<template>
    <div class="background">
        <div class="title">{{ simpleName }}可视化大屏</div>
        <div class="flex d_f">
            <div class="left">
                <div class="d_f a_i_c">
                    <!-- <img src="../../../assets/weather.png" alt="" class="weather"> -->
                    <!-- <div class="m_l_10">
                        <div><span class="number">32</span><span class="unit">℃</span></div>
                        <div class="line"></div>
                        <div class="pm">PM 2.0</div>
                    </div> -->
                    <div class="m_l_10">
                        <div class="time">{{ time }}</div>
                        <div class="date">{{ date }}| 月曜日</div>
                    </div>
                </div>
                <div class="statistics d_f j_c_s_b a_i_c">
                    <div class="d_f f_d_c j_c_s_b">
                        <div class="name">总业务笔数</div>
                        <div class="value">{{ totalInfo.totalNum }}</div>
                        <!-- <div class="d_f a_i_c"> <span class="size">同比增长</span> <img src="../../../assets/arrow.png"
                                class="arrow m_l_10" alt=""> <span class="proportion m_l_5">12%</span> </div> -->
                    </div>
                    <div class="increase"></div>
                    <div class="d_f f_d_c j_c_s_b">
                        <div class="name">总申请金额</div>
                        <div class="value">{{ totalInfo.totalApplyAmount }}</div>
                        <!-- <div class="d_f a_i_c"> <span class="size">同比增长</span> <img src="../../../assets/arrow1.png"
                                class="arrow m_l_10" alt=""> <span class="proportion m_l_5">12%</span> </div> -->
                    </div>
                    <div class="increase"></div>
                    <div class="d_f f_d_c j_c_s_b">
                        <div class="name">总业务户数</div>
                        <div class="value">{{ totalInfo.customerNum }}</div>
                        <!-- <div class="d_f a_i_c"> <span class="size">同比增长</span> <img src="../../../assets/arrow.png"
                                class="arrow m_l_10" alt=""> <span class="proportion m_l_5">12%</span> </div> -->
                    </div>
                </div>
                <div class="tab p_r">
                    <img src="../../../assets/tab.png" alt="" class="tabIcon" />
                    <span class="tips">各产品担保情况</span>
                </div>
                <div class="icon d_f j_c_s_b">
                    <img src="../../../assets/pool.png" alt="" class="img">
                    <img src="../../../assets/ranking.png" alt="" class="img ranking">
                </div>
                <div class="reveal d_f j_c_s_b">
                    <div class="product p_r">
                        <div class="financingBatch  ">
                            <div class="product_title">融资批量产品 <span class="product_num">{{ financingBatch }}</span>个
                            </div>
                        </div>
                        <div class="financingSingle">
                            <div class="product_title">融资单笔产品 <span class="product_num">{{ financingSingleStroke
                                    }}</span>个</div>
                        </div>
                        <div class="noFinancingBatch ">
                            <div class="product_title">非融资批量产品 <span class="product_num">{{ nonFusionBatch }}</span>个
                            </div>
                        </div>
                        <div class="noFinancingSingle ">
                            <div class="product_title">非融资单笔产品 <span class="product_num">{{ nonFusionSingleStroke
                                    }}</span>个</div>
                        </div>
                        <img src="../../../assets/box2.png" alt="" class="product_icon">
                    </div>
                    <div class="product">
                        <div v-for="(item, index) in projectRecords" :key="index" :class="index > 0 ? 'top' : ''">
                            <div class="d_f j_c_s_b">
                                <img src="../../../assets/medal1.png" class="medal" alt="" v-if="index == 0">
                                <img src="../../../assets/medal2.png" class="medal" alt="" v-if="index == 1">
                                <img src="../../../assets/medal3.png" class="medal" alt="" v-if="index == 2">
                                <img src="../../../assets/medal4.png" class="medal" alt="" v-if="index == 3">
                                <img src="../../../assets/medal5.png" class="medal" alt="" v-if="index == 4">
                                <div class="product_name">{{ item.productName }}</div>
                                <div class="num">{{ item.num || 0 }} <span class="unit">个</span> </div>
                            </div>
                            <div class="back">
                                <div class="topFill" :style="{ width: item.ratio + '%' }" v-if="index == 0"></div>
                                <div class="fill" :style="{ width: item.ratio + '%' }" v-if="index != 0"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab p_r">
                    <img src="../../../assets/tab.png" alt="" class="tabIcon" />
                    <span class="tips">各产品担保情况</span>
                </div>
                <div id="echarts" ref="echarts"></div>
            </div>
            <div class="right">
                <div class="tab p_r">
                    <img src="../../../assets/tab.png" alt="" class="tabIcon" />
                    <span class="tips">合作机构排名</span>
                </div>
                <div class="head d_f a_i_c">
                    <div style="width: 7%;text-align: center;"></div>
                    <div style="width: 27%;text-align: center;">机构名称</div>
                    <div style="width: 30%;text-align: center;">地区</div>
                    <div style="width: 20%;text-align: center;">总额度</div>
                    <div style="width: 16%;text-align: center;">合作业务</div>
                </div>
                <div class="auto">
                    <template v-for="(item, index) in institution" :key="index">
                        <div class="d_f a_i_c m_t_10">
                            <div class="one d_f j_c_c a_i_c" v-if="index == 0">{{ index + 1 }}</div>
                            <div class="two d_f j_c_c a_i_c" v-if="index == 1">{{ index + 1 }}</div>
                            <div class="three d_f j_c_c a_i_c" v-if="index == 2">{{ index + 1 }}</div>
                            <div class="other d_f j_c_c a_i_c" v-if="index > 2">{{ index + 1 }}</div>
                            <el-tooltip :content="item.agencyName" effect="customized">
                                <div class="name ellipsis">{{ item.agencyName }}</div>
                            </el-tooltip>
                            <el-tooltip :content="item.area" effect="customized">
                                <div class="address ellipsis">{{ item.area }}</div>
                            </el-tooltip>
                            <el-tooltip :content="String(item.totalAmount) || '0'" effect="customized">
                                <div class="limit">{{ item.totalAmount || '0' }}</div>
                            </el-tooltip>
                            <el-tooltip :content="item.productName || '0'" effect="customized">
                                <div class="d_f j_c_c productName" style="width: 14%;">
                                    {{ item.productName }}
                                </div>
                            </el-tooltip>
                        </div>
                    </template>
                </div>
                <div class="tab p_r">
                    <img src="../../../assets/tab.png" alt="" class="tabIcon" />
                    <span class="tips">近30日担保户数（人）</span>
                </div>
                <div class="d_f" style="height: 28%;">
                    <img src="../../../assets/right_ranking.png" class="right_ranking" alt="">
                    <div class="security">
                        <div v-for="(item, index) in security" :key="index" class="d_f top">
                            <div class="num">NO,{{ index + 1 }}</div>
                            <div class="size">{{ item.label }}</div>
                            <div class="p_r arrow d_f j_c_c a_i_c">
                                <img src="../../../assets/arrow_icon1.png" alt="" class="fill">
                                <img src="../../../assets/arrow_icon5.png" alt="" class="fill">
                                {{ item.num }}人
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <img src="../../../assets/exit.png" alt="" class="exit" @click="exit">
    </div>
</template>

<script lang='ts'>
import { defineComponent, reactive, toRefs, onBeforeMount, onMounted, onUnmounted } from 'vue'
import { screenType } from '../../../type/report'
import * as echarts from 'echarts';
import { useRouter } from 'vue-router';
import {momentDate} from '../../../utils/date'
import { screenTotalBiz, productBizCount, productAmount, agencyStat, cusLabelStat, productCategoryBizCount,statisticalCompanyInfo } from '../../../api/report'
export default defineComponent({
    name: '',
    setup() {
        const data: screenType = reactive({
            date: '',
            time: '',
            timer: null,
            form: [
                {
                    label: '输入框',
                    type: 'input',
                    field: 'name',
                    value: '',
                },
                {
                    label: '树状',
                    type: 'tree',
                    field: 'role',
                    value: null,
                    arr: [{ name: '123', id: '1' }],
                    buildValue: 'id',
                    buildLable: 'name'
                },
            ],
            projectRecords: [],
            institution: [],
            security: [],
            totalInfo: {
                customerNum: 0,
                totalApplyAmount: 0,
                totalNum: 0
            },
            financingSingleStroke: 0,
            financingBatch: 0,
            nonFusionSingleStroke: 0,
            nonFusionBatch: 0,
            chart: null,
            simpleName: '',
        })
        const router = useRouter()
        onBeforeMount(() => {
            methods.toggleFullScreen()
            data.date = momentDate('DD/MM/YYYY')   
            data.time = momentDate('HH:mm:ss')  
            data.timer = setInterval(() => {
                data.time = momentDate('HH:mm:ss')
            }, 1000)

        })
        onMounted(() => {
            statisticalCompanyInfo({ id: '' }).then((res:any) => {
                if (!res) return
                data.simpleName= res.simpleName
            })
            methods.getData()

        })
        const methods = {
            toggleFullScreen() {
                document.documentElement.requestFullscreen()
            },
            togexitFullscreen() {
                document.exitFullscreen()
            },
            getData() {
                screenTotalBiz({}).then((res: any) => {
                    data.totalInfo = res
                })
                productBizCount({}).then((res: any) => {
                    data.projectRecords = res.slice(0, 5)
                    let total = 0
                    data.projectRecords.map((item: any) => {
                        total += item.num
                    })
                    data.projectRecords.map((item: any) => {
                        item.ratio = ((item.num / total) * 100).toFixed(2)
                    })
                    console.log(data.projectRecords);
                })
                productAmount({}).then((res: any) => {
                    methods.getEcharts(res)
                })
                agencyStat({}).then((res: any) => {
                    res.map((item: any) => {
                        if (item.agencyArea) {
                            let area = JSON.parse(item.agencyArea)
                            area = area.sort((a, b) => b.length - a.length)
                            let name = ''
                            area.map(item => {
                                if (name) {
                                    name = name + ',' + item.join('/')
                                } else {
                                    name = item.join('/')
                                }
                            })

                            item.area = name
                        }
                    })
                    data.institution = res
                })
                cusLabelStat({}).then((res: any) => {
                    data.security = res
                })
                productCategoryBizCount({}).then((res: any) => {
                    res.map((item: any) => {
                        if (item.productCategoryName == '融资单笔产品') {
                            data.financingSingleStroke = item.num
                        } if (item.productCategoryName == '融资批量产品') {
                            data.financingBatch = item.num
                        } if (item.productCategoryName == '非融单笔产品') {
                            data.nonFusionSingleStroke = item.num
                        } if (item.productCategoryName == '非融批量产品') {
                            data.nonFusionBatch = item.num
                        }
                    })

                })
            },
            getArr(name: string, list: any) {
                let arr = []
                list.map((item: any) => {
                    item.innerProductList.map((item1: any) => {
                        if (name == item1.productName) {
                            let guaMoney = '0'
                            if (item1.guaMoney > 0) {
                                guaMoney = (item1.guaMoney / 10000).toFixed(2)
                            }
                            arr.push(guaMoney)
                        }
                    })
                })
                return arr
            },
            getRandomGradient() {
                return `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255})`
            },
            getEcharts(res: any) {
                const chart = echarts.init(document.getElementById('echarts'));

                let xAxis = res.map((item: any) => {
                    return item.month
                })
                let series = []

                let list = res[0].innerProductList

                res.map((item: any) => {
                    list.map((item1: any) => {
                        if (!item.innerProductList.some((item2: any) => item2.productName == item1.productName)) {
                            item.innerProductList.push({ guaMoney: 0, productName: item1.productName })
                        }
                    })
                })
                let maxScore = res.reduce((prev, curr) => {
                    return prev > curr.innerProductList.length ? prev : curr.innerProductList.length
                })
                res.map((item: any) => {
                    if (item.innerProductList.length == maxScore) {
                        list = item.innerProductList

                    }
                })
                let legend = list.map((item: any) => {
                    return item.productName
                })
                res.map((item: any) => {
                    list.map((item1: any) => {
                        if (!item.innerProductList.some((item2: any) => item2.productName == item1.productName)) {
                            item.innerProductList.push({ guaMoney: 0, productName: item1.productName })
                        }
                    })
                })
                list.map((item: any) => {
                    series.push({
                        name: item.productName,
                        data: methods.getArr(item.productName, res),
                        type: 'line',
                        smooth: true,
                        // lineStyle: {
                        //     color: '#31FBFB' // 修改曲线颜色为红色
                        // },
                        showSymbol: false,
                        areaStyle: {
                            opacity: 0.5,
                            // color:methods.getRandomGradient()
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {
                                    offset: 0,
                                    color: methods.getRandomGradient()
                                },
                                {
                                    offset: 1,
                                    color: methods.getRandomGradient()
                                }
                            ])
                        },
                    })
                })
                console.log(series);
                var option = {
                    tooltip: {
                        trigger: "axis",
                        axisPointer: {
                            type: "shadow",
                        },
                        show: true,
                        //             formatter: function (params) {
                        //     var relVal = params[0].name
                        //     for (var i = 0, l = params.length; i < l; i++) {
                        //       relVal += '<br/>' + params[i].marker + params[i].seriesName + ' &nbsp;&nbsp;&nbsp;' + params[i].value + `w`
                        //     }
                        //     return relVal
                        //   }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: xAxis,
                        axisLabel: {
                            color: '#fff',// x轴字体颜色
                            interval: 0//轴显示所有的数据
                        },
                        axisLine: {
                            lineStyle: {
                                show: false,//是否显示坐标轴轴线，
                                color: '',//x轴轴线的颜色
                                width: 1,//x轴粗细
                            }
                        },
                        splitLine: { show: false },
                    },
                    // color: ['#31FBFB', '#24CBFF', '#5158FA'],
                    legend: {
                        data: legend,
                        bottom: '0',
                        icon: 'circle',
                        textStyle: {
                            color: '#fff',
                            fontSize: 12
                        },
                        show: true
                    },
                    yAxis: {
                        type: 'value',
                        axisLabel: {
                            color: '#fff',// x轴字体颜色
                            formatter: `{value} w`,// 这里设置单位，{value} 是占位符，表示数值本身
                            interval: 0//轴显示所有的数据
                        },
                        axisLine: {
                            lineStyle: {
                                show: false,//是否显示坐标轴轴线，
                                color: 'red',//x轴轴线的颜色
                                width: 1,//x轴粗细
                            }
                        },
                        splitLine: {
                            show: true, lineStyle: {
                                type: 'dashed',
                                color: 'rgba(70, 70, 70, 1)'
                            }
                        }  // 不展示横向的网格线
                    },
                    grid: {
                        left: '0%',
                        right: "5%",
                        bottom: "40%",
                        top: '5%',
                        containLabel: true,
                    },
                    series: series
                    // {
                    //         name: '融资担保金额',
                    //         data: [150, 300, 140, 400, 250, 370, 40],
                    //         type: 'line',
                    //         smooth: true,
                    //         lineStyle: {
                    //             color: '#31FBFB' // 修改曲线颜色为红色
                    //         },
                    //         showSymbol: false,
                    //         areaStyle: {
                    //             opacity: 0.5,
                    //             color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    //                 {
                    //                     offset: 0,
                    //                     color: 'rgba(49, 251, 251, 0.9)'
                    //                 },
                    //                 {
                    //                     offset: 1,
                    //                     color: 'rgba(49, 251, 251, 0)'
                    //                 }
                    //             ])
                    //         },
                    //     },
                    //     {
                    //         name: '融资再担保金额',
                    //         data: [400, 100, 250, 260, 130, 120, 160],
                    //         type: 'line',
                    //         smooth: true,
                    //         lineStyle: {
                    //             color: '#24CBFF' // 修改曲线颜色为红色
                    //         },
                    //         showSymbol: false,
                    //         areaStyle: {
                    //             opacity: 0.5,
                    //             color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    //                 {
                    //                     offset: 0,
                    //                     color: 'rgba(6, 93, 255, 1)'
                    //                 },
                    //                 {
                    //                     offset: 1,
                    //                     color: 'rgba(41, 212, 250, 0)'
                    //                 }
                    //             ])
                    //         },
                    //     },
                    //     {
                    //         name: '非融资担保金额',
                    //         data: [40, 370, 250, 400, 300, 150, 80],
                    //         type: 'line',
                    //         smooth: true,
                    //         lineStyle: {
                    //             color: '#24CBFF' // 修改曲线颜色为红色
                    //         },
                    //         showSymbol: false,
                    //         areaStyle: {
                    //             opacity: 0.5,
                    //             color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    //                 {
                    //                     offset: 0,
                    //                     color: 'rgba(6, 93, 255, 0.9)'
                    //                 },
                    //                 {
                    //                     offset: 1,
                    //                     color: 'rgba(6, 93, 255, 0)'
                    //                 }
                    //             ])
                    //         },
                    //     },
                };

                option && chart.setOption(option);
            },
            exit() {
                methods.togexitFullscreen()
                router.go(-1)
            }
        }
        onUnmounted(() => {
            clearInterval(data.timer)
            data.timer = null
        });
        return {
            ...toRefs(data),
            ...methods
        }
    }
})
</script>
<style scoped lang='scss'>
.background {
    background-image: url('../../../assets/blueScreen.png');
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
    position: relative;
    z-index: 1;

    .title {
        position: absolute;
        top: 1.48vh;
        text-align: center;
        width: 100%;
        background: linear-gradient(180deg, #C8D7E4 0%, #FFFFFF 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        text-fill-color: transparent;
        font-size: 2vw;
    }

    .exit {
        position: absolute;
        top: 5vh;
        right: 4.5vw;
        width: 8vw;
        cursor: pointer;
        z-index: 99999;
    }
}

.flex {
    width: calc(100% - 8vw);
    height: calc(100% - 14vh);
    margin-left: 4vw;
    padding-top: 7vh;
}

.left {
    width: 70%;
    height: 100%;

    .weather {
        width: 56px;
        height: 46px;
    }

    .number {
        font-family: 'typeface';
        color: #83C3FF;
        font-size: 1vw;
    }

    .unit {
        color: #3584B1;
        font-size: 14px;
    }

    .line {
        background: rgba(255, 255, 255, 0.3);
        width: 2vw;
        height: 1px;
    }

    .pm {
        color: #83C3FF;
        font-size: 12px;
    }

    .time {
        font-family: 'typeface';
        color: #83C3FF;
        font-size: 1vw;
    }

    .date {
        color: #83C3FF;
        font-size: 12px;
    }

    .statistics {
        margin-top: 2vh;
        width: 42%;

        .name {
            color: #FFFFFF;
            font-size: 0.83vw;
        }

        .value {
            color: #83C3FF;
            font-size: 2vw;
        }

        .size {
            color: #FFFFFF;
            font-size: 0.625vw;
        }

        .arrow {
            width: 16px;
            height: 16px;
        }

        .proportion {
            color: #FF9E3D;
            font-size: 12px;
        }

        .increase {
            border-image: linear-gradient(90deg, #0073ED 8%, #05FFFF 100%) 0.7;
            background: linear-gradient(90deg, #0564D6 8%, #03D2FF 100%);
            width: 2px;
            height: 4.44vh;
        }

    }

    .tab {
        width: 38%;
        height: 7vh;
        margin-top: 3%;

        .tabIcon {
            width: 100%;
            height: 100%;
        }

        .tips {
            position: absolute;
            background: linear-gradient(180deg, #C8D7E4 -3%, #FFFFFF 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            display: inline-block;
            left: 10%;
            top: 0vh;
            font-size: 1vw;
            font-weight: bold;
            font-family: 'typeface';
        }
    }

    .icon {
        width: 44.5%;

        .img {
            width: 45%;
        }
    }

    .reveal {
        width: 44%;
        margin-top: 3vh;
        height: 28%;

        .product {
            width: 45%;
        }

        .financingBatch {
            background-image: url('../../../assets/box1.png');
            width: 3.6vw;
            height: 8.5vh;
            background-size: 100% 100%;
            position: absolute;
            top: 0px;
            left: 0px;
            padding: 0px 5px;
            display: flex;
            justify-content: center;
        }

        .financingSingle {
            background-image: url('../../../assets/box1.png');
            width: 3.6vw;
            height: 8.5vh;
            background-size: 100% 100%;
            position: absolute;
            top: 0px;
            right: 1%;
            padding: 0px 5px;
            display: flex;
            justify-content: center;
        }

        .product_icon {
            width: 5vw;
            background-size: 100% 100%;
            position: absolute;
            top: 30%;
            left: 30%;
        }

        .noFinancingBatch {
            background-image: url('../../../assets/box3.png');
            width: 3.6vw;
            height: 8.5vh;
            background-size: 100% 100%;
            position: absolute;
            bottom: 0px;
            left: 0px;
            padding: 0px 5px;
            display: flex;
            justify-content: center;

        }

        .noFinancingSingle {
            background-image: url('../../../assets/box3.png');
            width: 3.6vw;
            height: 8.5vh;
            background-size: 100% 100%;
            position: absolute;
            bottom: 0px;
            right: 1%;
            padding: 0px 5px;
        }

        .product_title {
            color: #F1FEFF;
            font-size: 0.52vw;
            padding-top: 2vh;
            margin-left: 4px;
        }

        .product_num {
            color: #FFEC49;
            font-size: 0.625vw;
            margin: 0px 2px;
        }

        .medal {
            width: 1.6vw;
        }

        .product_name {
            color: #E1F7FF;
            font-size: 0.625vw;
            letter-spacing: 0.01em;
            width: 7.8vw;
        }

        .num {
            color: #6698C7;
            font-size: 13px;
        }

        .unit {
            color: #E1F7FF;
            font-size: 12px;
        }

        .back {
            width: 100%;
            background: #233452;
            height: 3.5px;
            margin-top: 5px;

            .fill {
                border: 0.7px solid;
                border-image: linear-gradient(90deg, #0073ED 8%, #05FFFF 100%) 0.7;
                height: 100%;
                background: linear-gradient(90deg, #0564D6 8%, #03D2FF 100%);
            }

            .topFill {
                border: 0.7px solid;
                border-image: linear-gradient(90deg, #F3B137 8%, #FBD56A 100%) 0.7;
                height: 100%;
                background: linear-gradient(90deg, #FF9A38 8%, #FFBD64 100%);
            }
        }

        .top {
            margin-top: 8px;
        }

    }

    #echarts {
        width: 100%;
        height: 26%;
    }
}

.right {
    width: 30%;
    height: 100%;
    // margin-left: 5%;

    .tab {
        width: 100%;
        height: 7vh;
        margin-top: 5%;

        .tabIcon {
            width: 100%;
            height: 100%;
        }

        .tips {
            position: absolute;
            background: linear-gradient(180deg, #C8D7E4 -3%, #FFFFFF 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            display: inline-block;
            left: 10%;
            top: 0vh;
            font-size: 1vw;
            font-family: 'typeface';
        }
    }

    .head {
        width: 100%;
        background: rgba(49, 121, 165, 0.6);
        height: 3.92vh;
        color: rgba(255, 255, 255, 0.75);
        font-size: 16px;
    }

    .auto {
        height: 49%;
        overflow: auto;

        .one {
            box-sizing: border-box;
            border: 1px dashed #FF7734;
            background: rgba(255, 119, 52, 0.5);
            width: 6%;
            height: 100%;
            color: #FFFFFF;
            font-size: 0.83vw;
        }

        .two {
            box-sizing: border-box;
            border: 1px dashed #FFC700;
            background: rgba(250, 195, 0, 0.5);
            width: 6%;
            height: 100%;
            color: #FFFFFF;
            font-size: 0.83vw;
        }

        .three {
            box-sizing: border-box;
            border: 1px dashed #3491FF;
            background: rgba(52, 158, 255, 0.5);
            width: 6%;
            height: 100%;
            color: #FFFFFF;
            font-size: 0.83vw;
        }

        .other {
            border: 1px dashed #0066AF;
            box-sizing: border-box;
            background: rgba(0, 190, 250, 0.1);
            width: 6%;
            height: 100%;
            color: #00A3FF;
            font-size: 0.83vw;
        }

        .ellipsis {
            white-space: nowrap; //不换行
            overflow: hidden; //超出部分隐藏
            text-overflow: ellipsis; //文本溢出显示省略号
            font-size: 12px;
            color: #FFFFFF;
            text-align: center;
        }

        .name {
            width: calc(25% - 5px);
            margin-left: 5px;
        }

        .address {
            width: calc(30% - 5px);
            margin-left: 5px;
        }

        .limit {
            color: #8FDCF6;
            font-size: 0.75vw;
            font-weight: bold;
            width: calc(20% - 5px);
            text-align: center;
            white-space: nowrap; //不换行
            overflow: hidden; //超出部分隐藏
            text-overflow: ellipsis; //文本溢出显示省略号
        }

        .productName {
            white-space: nowrap; //不换行
            overflow: hidden; //超出部分隐藏
            text-overflow: ellipsis; //文本溢出显示省略号
            font-size: 12px;
            color: #FFFFFF;
            text-align: center;
        }

        .good {
            width: 1.45vw;
            height: 1.45vw;
        }

    }

    .right_ranking {
        width: 6.4vw;
        height: 17.94vh;
    }

    .num {
        color: #8FDCF6;
        font-size: 18px;
        font-weight: bold;
        margin-left: 0.8vw;
    }

    .top {
        margin-top: 0.7vh;
    }

    .size {
        color: #FFFFFF;
        font-size: 14px;
        margin-left: 0.5vw;
        width: 7.8vw;
    }

    .arrow {
        width: 6.14vw;
        height: 3.07vh;
        color: #FFFFFF;
        font-size: 0.9375vw;
        margin-left: 1vw;
    }

    .fill {
        position: absolute;
        left: 0;
        top: 0px;
        width: 100%;
        height: 100%;
    }
    .security{
     width: 100%;
     height: 100%;
     overflow-y: auto;
    }
}

</style>
<style lang='scss'>
.el-popper.is-customized {
    /* Set padding to ensure the height is 32px */
    padding: 6px 12px;
    background: linear-gradient(90deg, rgb(159, 229, 151), rgb(204, 229, 129)) !important;
}

.el-popper.is-customized .el-popper__arrow::before {
    background: linear-gradient(45deg, #b2e68d, #bce689) !important;
    right: 0;
}
</style>